<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画基础</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 10px;
      }

      body {
        display: flex;
        height: 100vh;
        background-color: #34495e;
        justify-content: center;
        align-items: center;
      }

      .container {
        display: flex;
      }

      .box {
        position: relative;
        width: 10vw;
        height: 10vh;
        background-color: #1abc9c;
        border-radius: 2rem;
        margin: 3vw;
      }

      .box-transition {
        background-color: #16a085;
        /**
            transition: property duration timing-funtion delay；
            property: 规定设置过渡效果的css属性名称；
            duration: 规定完成过渡效果需要多少秒或毫秒；
            timing-function: 规定速度效果的速度曲线；
            delay: 定义过渡效果何时开始；

            缺点：
            ①、需要事件触发，无法在网页加载时自动发生；
            ②、是一次性的，不能重复发生，除非再次触发；
            ③、只能定义开始状态和结束状态，不能定义中间状态，也就是说只有2个状态；
            ④、一条 tarnsition 规则，只能定义一个属性的变化，不能涉及多个属性；
        */
        transition: all 3s ease-in-out 0s;
      }
      .box-transition:hover {
        transform: rotate(180deg) scale(1.2);
        border: 1rem solid #e74c3c;
      }

      .box-animation {
        background-color: #2ecc71;
        border: 2rem solid #e67e22;
        /**
           animation: name duration timing-function delay iteration-count direction play-state fill-mode;
           name: 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致；
           duration: 定义动画持续的时间长；
           timing-function: 规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率；
           delay: 定义在浏览器开始执行动画之前等待的时间；
           iteration-count: 定义动画的播放次数，可选具体次数或者无限(infinite)；
           direction: 设置动画播放方向：
                        normal(按时间轴顺序)
                        reverse(时间轴反方向运行)
                        alternate(轮流，即来回往复进行)
                        alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
            play-state: 控制元素动画的播放状态，通过此来控制动画的暂停和继续：
                        running(继续)
                        paused(暂停)
            fill-mode: 控制动画结束后，元素的样式，有四个值：
                        none(回到动画没开始时的状态)
                        forwards(动画结束后动画停留在结束状态)
                        backwards(动画回到第一帧的状态)
                        both(根据animation-direction轮流应用forwards和backwards规则)
                        >> 注意与iteration-count不要冲突(动画执行无限次)
        */
        animation: changebox 2s ease-in-out 3s infinite alternate paused forwards;
      }

      .box-animation:hover {
        animation-play-state: running;
      }
      /**
        定义一个动画组合，名称自己起， 105 50% 70% 100%代表在变化中不同时间点的
        属性值，比如这个动画的总时间是1s，那么10%就是0~0.1s中的动画，通过此可以较
        精准的控制动画变化中的任何一个时间点的属性效果，提高了对动画的把控，是做复杂
        动画的基础。
      */
      @keyframes changebox {
        10% {
          background: #2c3e50;
        }
        50% {
          width: 80px;
        }
        70% {
          background: #2980b9;
          border: 4rem solid #d35400;
        }
        100% {
          transform: rotate(180deg) scale(1.2);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box box-transition"></div>
      <div class="box box-animation"></div>
    </div>
  </body>
</html>
